<template>
  <el-tooltip :content="content" :placement="placement" effect="dark">
    <el-image :src="inHover ? infoHover : info" class="info-icon-img" @mouseenter="changeImg(true)" @mouseleave="changeImg()" @click="handleClick"/>
  </el-tooltip>

</template>

<script>
import info from '@/assets/tishi.png';
import infoHover from '@/assets/tishi_hover.png';
export default {
  props: {
    content: {
      type: String,
      default: ''
    },
    placement: {
      type: String,
      default: 'top'
    }
  },
  data() {
    return {
      info,
      infoHover,
      inHover: false
    };
  },
  methods: {
    changeImg(inHover = false) {
      this.inHover = inHover;
    },
    handleClick() {
      this.$emit('handleClick');
    }
  }
};
</script>

<style lang="scss" scoped>
.info-icon-img {
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
